<template>
  <div class="myChart-warp">
    <div id="chart12" ref="chart12" class="myChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart12: null
    }
  },
  props: {
    title: {
      type: Object,
      default: () => {
        return {
          left: '市场活跃指数',
          right: '房价指数'
        }
      }

    }
  },
  mounted() {
    this.initMyChart()
  },
  methods: {
    initMyChart() {
      if (this.myChart12) {
        this.myChart12.dispose()
      }
      this.myChart12 = echarts.init(this.$refs.chart12);
      this.myChart12.setOption(
        {
          xAxis: {
            type: 'value',
            axisLabel: {
              formatter: function (value, index) {
                return value + '%';
              }
            },
          },
          yAxis: {
            type: 'value',
            show:false
          },
          series: [
            {
              data: [
                120,
                {
                  value: 200,
                  itemStyle: {
                    color: '#a90000'
                  }
                },
                150,
                80,
                70,
                110,
                130
              ],
              type: 'bar'
            }
          ]
        }
      );

    }
  }
}

</script>

<style lang="scss" scoped>
.myChart-warp {
  width: 340px;
  height: 180px;
  background-color: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 8px;
  .myChart {
    width: 100%;
    height: 100%;
  }
}

</style>
